<template>
	<div id="STree">
		<a-tree v-if="treeData && treeData.length"
				:tree-data="treeData"
				:replace-fields="replaceFields"
        :checkable="checkable"
        v-model="checkedKeys"
        :default-expand-all="defaultExpandAll"
				@select="handleTreeSelect"
				@expand="handleExpand"
        @check="handleCheck">
		</a-tree>
		<div class="no-data" v-else>
			<img src="../assets/img/no-data.png" alt="">
		</div>
	</div>
</template>

<script> 
// import api from "@/util/api";
export default {
    components: {

    },
    filters: {

    },
    props: {
    // getUrl: {
    //   type: String,
    // },
        treeData: {
            type: Array,
            default: () => {
                return [];
            }
        },
        replaceFields: {
            type: Object,
            default: () => {
                return {
                    children: 'children',
                    title: 'name',
                    key:"id"
                };
            }
        },
        checkable:{
            type:Boolean,
            default:false
        },
        defaultExpandAll:{
            type:Boolean,
            default:false
        }
    },
    data () {
        return {
            checkedKeys:[],
        };
    },
    computed: {
    },
    watch: {
    },
    created () {
    },
    mounted () {
    },
    methods: {
        handleExpand () {
            // console.log(key, node);
        },
        handleTreeSelect (value, e) {
            this.$emit('handleTreeSelect', e ? e.node.dataRef : value);
        },
        handleCheck(value,e) {
            this.$emit('handleCheck', {checked:value,halfChecked:e.halfCheckedKeys});
        } 
    }
};
</script>

<style lang="scss" scoped>
#STree {
  height: 100%;
  padding: 0 16px;
  overflow-y: scroll;
  .icon {
    font-size: 16px;
  }
  .no-data {
    height: 500px;
    text-align: center;
    line-height: 500px;
  }
  ::v-deep {
    //覆盖样式
    .ant-tree-switcher-noop {
      margin-right: 10px;
    }
    .ant-tree-node-content-wrapper:hover {
      // background: none !important;
      background: #f5f5f5 !important;
    }
    .ant-tree-node-selected {
      background: #f5f5f5 !important;
      // width: 100%;
    }
    .ant-tree-switcher_close {
      background: url("../assets/img/plus.png") no-repeat 100% 100%;
      background-position: 5px 4px;
      margin-right: 10px;
      &::before {
        font-family: "iconfont";
        color: #8ea3b8;
        font-size: 14px;
      }
      i {
        display: none;
      }
      svg {
        overflow: hidden;
        display: none;
      }
    }
    .ant-tree-switcher_open {
      background: url("../assets/img/minus.png") no-repeat 100% 100%;
      background-position: 5px 4px;
      margin-right: 10px;
      &::before {
        font-family: "iconfont";
        color: #8ea3b8;
        font-size: 14px;
      }
      i {
        display: none;
      }
      svg {
        overflow: hidden;
        display: none;
      }
    }
  }
}
</style>
